<template>
  <el-container v-loading="loading" style="height: 100%">
    <el-header style="height: 170px; padding: 15px">
      <div class="flex-y-center">
        <header-select :level="2" @selectBuilding="buildingChangeHandle" />
        <el-cascader
          v-model="processSelected"
          :options="processData"
          :props="{ multiple: true }"
          :collapse-tags="true"
          :show-all-levels="false"
          size="small"
          placeholder="请选择工序"
          style="margin-left: 20px; width: 400px"
          popper-class="selectProcessPlane"
          @change="processChangeHandle"
        />
        <el-button size="small" type="primary" style="margin-left: 20px" @click="getContentData">查询</el-button>
        <el-button size="small" type="primary" style="margin-left: 20px" @click="resetSelectProcess">重置</el-button>
        <el-checkbox size="small" v-model="showApproved" style="margin-left: 20px">显示已验收</el-checkbox>
      </div>
      <el-descriptions :column="4" class="head-desc">
        <el-descriptions-item label="竣工节点">{{ buildingPlan.completionNode }}</el-descriptions-item>
        <el-descriptions-item label="达售节点">{{ buildingPlan.preSellNode }}</el-descriptions-item>
        <el-descriptions-item label="正负零节点">{{ buildingPlan.plusMinusZeroNode }}</el-descriptions-item>
        <el-descriptions-item label="达售楼层">{{ buildingPlan.sellFloor }}</el-descriptions-item>
      </el-descriptions>
      <div style="padding: 15px 0 0 40px">
        <el-row>
          <el-col :span="6" class="legend" v-for="(item, index) in statusList2" :key="index">
            <div class="block" :style="{ backgroundColor: item.color }" />
            <div class="label">{{ item.label }}</div>
          </el-col>
        </el-row>
        <el-row style="margin-top: 5px">
          <el-col :span="6" class="legend" v-for="role in roleList" :key="role.key">
            <div class="block">{{ role.abbr }}</div>
            <div class="label pointer" :class="{ active: roleKey === role.key }" @click="changeRole(role.key)">{{ role.name }}</div>
          </el-col>
          <el-col :span="6" class="legend">
            <div class="label" style="color: red">注:红色字体表示未及时验收</div>
          </el-col>
        </el-row>
      </div>
    </el-header>
    <!-- 工序整体情况 -->
    <el-main style="padding: 0">
      <el-empty description="暂无数据" v-if="!showList.length" />
      <BuildingTable v-else :buildings="showList" :floors="floors" :role-key="roleKey" @progressClick="showRatioTable" @cellClick="cellClick" />
    </el-main>
    <RatioTablePopup ref="RatioTablePopup" />
    <BasicEngineering ref="BasicEngineering" />
  </el-container>
</template>
<script>
// 质检楼栋视图
import { roleList, statusList2 } from './common'
import { getBuildingView, getBuildingPlan, getSpecialType } from '@/api/cqCheck'
import HeaderSelect from '@/views/statement/components/HeaderSelect'
import BuildingTable from './components/BuildingTable'
import RatioTablePopup from './components/RatioTablePopup'
import BasicEngineering from './components/BasicEngineering'
export default {
  name: 'BuildingView',
  components: {
    HeaderSelect,
    BuildingTable,
    RatioTablePopup,
    BasicEngineering
  },
  data() {
    return {
      roleList,
      statusList2,
      buildingId: '',
      loading: false,
      buildingViews: [],
      floors: [],
      buildingPlan: {},
      processData: [],
      processSelected: [],
      showApproved: false,
      roleKey: ''
    }
  },
  computed: {
    showList() {
      const data = this.buildingViews
      return this.showApproved ? data.filter(i => i.hasRecord) : data
    }
  },
  watch: {
    '$route.query.buildingId'(val) {
      if (!val) return
      this.buildingId = val
      this.getContentData()
      this.getBuildingPlan()
      this.queryProcess()
    }
  },
  created() {
    this.buildingId = this.$route.query.buildingId
    this.getContentData()
    this.getBuildingPlan()
    this.queryProcess()
  },
  methods: {
    // 查询楼栋视图数据
    async getContentData() {
      const { buildingId } = this
      if (!buildingId || this.loading) return

      const selected = this.processSelected
      const processIds = []
      if (selected.length) selected.map(item => processIds.push(item[item.length - 1]))

      const opt = { buildingId, checkTableId: processIds.join(',') }
      this.loading = true
      const res = await getBuildingView(opt).catch(() => false)
      this.loading = false
      if (res === false) return

      const data = res.data
      this.buildingViews = data.content || []
      this.floors = data.floor || []
    },
    // 查询楼栋计划
    async getBuildingPlan() {
      const { buildingId } = this
      if (!buildingId) return

      const res = await getBuildingPlan({ buildingId }).catch(() => false)
      if (res === false) return
      this.buildingPlan = res.data
    },
    // 获取工序数据
    async queryProcess() {
      const { buildingId } = this
      const selected = this.processSelected

      const res = await getSpecialType({ buildingId }).catch(() => false)
      if (res === false) return

      const list = []
      const processIds = []
      res.data.map(item => {
        const checkTypes = item.children
        list.push(...checkTypes)
        checkTypes.map(checkType => {
          processIds.push(...checkType.children.map(r => r.value))
        })
      })
      this.processData = list.sort((a, b) => a.seq - b.seq)

      if (selected.length > 0) {
        this.processSelected = selected.filter(item => processIds.includes(item[item.length - 1]))
      }
    },
    // 楼栋选择事件处理
    buildingChangeHandle(buildingId) {
      // this.buildingId = buildingId
      // this.getContentData()
      // this.queryProcess()
    },
    // 工序改变处理
    processChangeHandle(value) {
      // console.log(value)
    },
    // 重置选择工序
    resetSelectProcess() {
      this.processSelected = []
      this.getContentData()
    },
    changeRole(val) {
      this.roleKey = this.roleKey === val ? '' : val
    },
    showRatioTable(data) {
      this.$refs.RatioTablePopup.open(data)
    },
    // 平面单元点击事件处理
    cellClick(data = {}) {
      const { buildingId } = this
      if (data.isBe) {
        data.buildingId = buildingId
        return this.$refs.BasicEngineering.open(data)
      }

      const { objectId } = data
      if (!objectId) return

      const query = { buildingId, checktableId: data.checkTableId, objectId }
      this.$router.push({ path: '/statement/CheckList', query })
    }
  }
}
</script>
<style scoped lang="scss">
.selectProcessPlane .el-cascader-menu__wrap {
  height: 500px;
}
.head-desc {
  margin-top: 20px;
  border-bottom: 1px solid #dcdfe6;
}
.legend {
  display: flex;
  align-items: center;
  font-size: 14px;
  .block {
    width: 14px;
    height: 14px;
    line-height: 14px;
    border-radius: 2px;
    margin-right: 5px;
    color: #fff;
    font-size: 12px;
    background-color: #64aeec;
    text-align: center;
  }
  .label {
    display: flex;
    align-items: center;
    color: #666;
  }
  .active {
    background: #64aeec;
    color: #ffffff;
    border-radius: 5px;
  }
}
</style>
